<template>
	<view class="app_main">
		<view class="navbar">
			<view class="fixed">
				<!-- 状态栏 时间 电量 信号 -->
				<view :style="{height: navbarStatusHeight+'px'}"></view>
				<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
				<view class="header_ele">
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
				<!-- 胶囊按钮左侧位置 -->
				<view class="navbar-content" :style="{width:navBarWidth+'px',height:navBarHeight+'px'}">
				</view>
				<!-- #endif -->
			</view>
			<!-- 设置占位 将微信小程序的状态栏高度预留出来 -->
			<view :style="{height:navbarStatusHeight+navBarHeight+'px' }"></view>
		</view>
		<view class="logo_main">
			<view class="title_log_in" v-if="formForget.type==2">
				<p class="m_title">修改密码</p>
				<p class="tip">使用原密码修改</p>
			</view>
			<view class="title_log_in" v-else>
				<p class="m_title">修改密码</p>
				<p class="tip">获取验证码修改</p>
			</view>
			<view class="login" v-if="formForget.type==2">
				<uni-forms ref="loginForm" :modelValue="formForget">
					<uni-easyinput placeholderStyle="font-size:28rpx;" type="number" class="input_log"
						@input="formForget.phone=formForget.phone.replace(/\D/g,'')" v-model="formForget.phone"
						maxlength="11" placeholder="请输入手机号" />
					<uni-easyinput placeholderStyle="font-size:28rpx;"
						@input="nextTick(()=>formForget.oldPassword=pattern($event))" type="password" class="input_log"
						v-model="formForget.oldPassword" placeholder="请输入当前密码" />
					<uni-easyinput placeholderStyle="font-size:28rpx;"
						@input="nextTick(()=>formForget.newPassword=pattern($event))" type="password" class="input_log"
						v-model="formForget.newPassword" placeholder="请输入新密码" />
					<uni-easyinput placeholderStyle="font-size:28rpx;"
						@input="nextTick(()=>formForget.newPassword2=pattern($event))" type="password" class="input_log"
						v-model="formForget.newPassword2" placeholder="确认新密码" />
				</uni-forms>
				<view class="footer">
					<view class="forget" @click="onLogin">
						返回登录
					</view>
					<view class="changeLogin" v-if="formForget.type==2" @click="onuseCode">
						验证码修改
					</view>
					<view class="changeLogin" v-else @click="onuseCode">
						无法获取验证码？使用密码修改>>
					</view>
				</view>
				<view class="btn">
					<button type="primary" color="#10a9e6"
						:class="{btn_bg:formForget.newPassword&&formForget.newPassword2&&formForget.oldPassword&&formForget.phone.length==11}"
						@click="confirmChange"
						:disabled="!(formForget.newPassword&&formForget.newPassword2&&formForget.oldPassword&&formForget.phone.length==11)"
						class="btn_sty">确认修改</button>
				</view>
			</view>
			<view class="login " v-else>
				<uni-forms ref="loginForm" :modelValue="formForget">
					<uni-easyinput placeholderStyle="font-size:28rpx;" type="number" class="input_log"
						@input="formForget.phone=formForget.phone.replace(/\D/g,'')" v-model="formForget.phone"
						maxlength="11" placeholder="请输入手机号" />
					<view class="code_re">
						<uni-easyinput placeholderStyle="font-size:28rpx;" type="number" :clearable="false"
							class="input_log" v-model="formForget.code" placeholder="请输入验证码" maxlength="6" />
						<view class="code_text" v-if="count==0" @click="getCode">
							获取验证码
						</view>
						<view class="code_text_" v-else>
							({{count}}s)后重新获取
						</view>
					</view>
					<uni-easyinput type="password" @input="nextTick(()=>formForget.newPassword=pattern($event))"
						placeholderStyle="font-size:28rpx;" class="input_log" v-model="formForget.newPassword"
						placeholder="请输入新密码" />
					<uni-easyinput placeholderStyle="font-size:28rpx;"
						@input="nextTick(()=>formForget.newPassword2=pattern($event))" type="password" class="input_log"
						v-model="formForget.newPassword2" placeholder="确认新密码" />
				</uni-forms>
				<view class="footer">
					<view class="forget" @click="onLogin">
						返回登录
					</view>
					<view class="changeLogin" v-if="formForget.type==2" @click="onuseCode">
						验证码修改
					</view>
					<view class="changeLogin" v-else @click="onuseCode">
						无法获取验证码？使用密码修改>>
					</view>
				</view>
				<view class="btn">
					<button type="primary" color="#10a9e6" @click="confirmChange"
						:class="{btn_bg:formForget.newPassword&&formForget.newPassword2&&formForget.phone.length==11&&formForget.code.length==6}"
						:disabled="!(formForget.newPassword&&formForget.newPassword2&&formForget.phone.length==11&&formForget.code.length==6)"
						class="btn_sty">确认修改</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref, nextTick
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import apiLogin from '@/util/network_api/login.js'
	import apiCode from '@/util/network_api/getcode.js'
	import md5 from 'js-md5';
	const loginForm = ref()
	// 校验密码非中文
	const pattern = (v) => {
		return v.replace(/[\u4E00-\u9FA5\s]/g, '')
	}
	const formForget = ref({
		phone: '', //手机号
		oldPassword: '', //旧密码
		newPassword: '', //新密码
		newPassword2: '',//确认新密码
		code: "", //验证码
		type: 1, //	更改密码类型：1-验证码改密，2-输入旧密码更改密码
	})
	onLoad((option) => {
		formForget.value.phone = option.phone
	})
	const navbarStatusHeight = ref(0)
	const navBarHeight = ref(0)
	const navBarWidth = ref(375)
	onLoad(() => {
		const info = uni.getSystemInfoSync()
		navbarStatusHeight.value = info.statusBarHeight
		// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
		// 条件编译 以下三个不支持胶囊样式
		// #ifndef H5 || APP-PLUS|| MP-ALIPAY
		const menuInfo = uni.getMenuButtonBoundingClientRect()
		// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
		navBarHeight.value = (menuInfo.bottom - info.statusBarHeight) + (menuInfo.top - info.statusBarHeight)
		// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
		navBarWidth.value = menuInfo.left
		// #endif
	})
	// 更改密码类型：1-验证码改密，2-输入旧密码更改密码
	const onuseCode = () => {
		if (formForget.value.type == 2) {
			formForget.value.type = 1
		} else {
			formForget.value.type = 2
		}
		formForget.value.newPassword2 = ''
		formForget.value.newPassword = ''
		formForget.value.oldPassword = ''
		formForget.value.code = ''
		count.value = 0
		clear.value = null
	}
	const count = ref(0) //倒计时
	const clear = ref(null)
	// 获取验证码
	const getCode = async () => {
		if (!/^1[^1^2]\d{9}$/.test(formForget.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		count.value = 59
		clear.value = setInterval(() => {
			count.value -= 1
			if (count.value == 0) {
				clearInterval(clear.value)
			}
		}, 1000)

		await apiCode.updateCode({
			phone: formForget.value.phone
		}).then(res => {
			if (res.code === 20000) {
				uni.showToast({
					title: res.message,
					icon: 'none',
					position: 'top',
				})
			}
		})
	}

	// 确认修改
	const confirmChange = async () => {
		if (!/^1[^1^2]\d{9}$/.test(formForget.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		if (formForget.value.newPassword != formForget.value.newPassword2) {
			uni.showToast({
				title: '密码不一致!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		//显示加载框
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		let dataObj = JSON.parse(JSON.stringify(formForget.value))
		dataObj.newPassword = (md5 as any)(formForget.value.newPassword)
		if (formForget.value.type == 2) {
			dataObj.oldPassword = (md5 as any)(formForget.value.oldPassword)
		}
		delete dataObj.newPassword2
		await apiLogin.updatePwd(dataObj).then(res => {
			//隐藏加载框
			uni.hideLoading();
			if (res.code === 20000) {
				uni.showToast({
					title: res.message,
					position: 'top',
					duration: 2000,
					icon: 'success'
				});
				setTimeout(() => {
					// 修改成功后跳转登录
					uni.navigateTo({
						url: "/pages/pages_network/login/login?custCode=" + uni.getStorageSync(
							'custCode')
					})
				}, 2000)
			}
		})
	}
	// 跳转到登录页
	const onLogin = () => {
		uni.redirectTo({
			url: "/pages/pages_network/login/login?custCode=" + uni.getStorageSync('custCode')
		});
	}
</script>

<style lang="scss" scoped>
	.app_main {
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url('@/static/network/login/bg_login.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top;
	}

	.navbar {
		.fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;

			.navbar-content {
				display: flex;
				align-items: center;
			}

			.header_ele {
				height: 120rpx;
			}
		}
	}

	.logo_main {
		/* #ifdef MP-WEIXIN */
		padding: 50rpx 60rpx 20rpx;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		padding: 120rpx 60rpx 20rpx;
		/* #endif */
		box-sizing: border-box;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
		height: 100%;
		overflow-y: auto;

		.title_log_in {
			margin: 0rpx 0 60rpx;

			.m_title {
				font-size: 48rpx;
				color: #000;
				font-weight: 700;
				margin-bottom: 20rpx;
			}

			.tip {
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.6);
			}
		}

		.login {
			:deep(.is-input-border) {
				// border-radius: 80rpx !important;
				// background-color: rgba(243, 244, 248, 1) !important;
				background-color: transparent !important;
				// padding: 10rpx;
				margin: 20rpx 0;
				border: none;
				border-bottom: 1rpx solid #ccc;
				border-radius: 0;
				height: 90rpx;

				&.is-focused {

					.uniui-clear,
					.uniui-eye-filled {
						color: #007cff99 !important;
					}
				}
			}

			.code_re {
				position: relative;

				.code_text {
					height: 30rpx;
					line-height: 30rpx;
					font-size: 28rpx;
					color: #007cff;
					position: absolute;
					top: calc(50% - 15rpx);
					right: 30rpx;
					z-index: 2;
				}

				.code_text_ {
					height: 30rpx;
					font-size: 28rpx;
					line-height: 30rpx;
					color: #999;
					position: absolute;
					top: calc(50% - 15rpx);
					right: 30rpx;
				}
			}
		}

		.hint {
			margin-left: 60rpx;
			margin-bottom: 10rpx;
		}

		.look_agree {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: rgba(128, 128, 128, 1);

			.l_text {
				display: flex;
				align-items: center;

				a {
					color: #007cff;
				}
			}
		}

		.btn {
			margin-top: 40rpx;

			.btn_sty {
				border-radius: 80rpx;
				background-color: #007cff6b;
				line-height: 90rpx;
				height: 90rpx;
				font-size: 32rpx
			}

			:deep(button:after) {
				border: none !important;
			}

			.btn_bg {
				background-color: #007cff;
			}
		}

		.footer {
			margin: 30rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;

			.forget {
				color: #505050;
			}

			.changeLogin {
				color: #007cff;
			}
		}
	}
</style>